
<div id="properties-container" ng-controller="propertiesController as property">
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">
                <span th:text="#{services.form.header.properties}"/>
            </h3>
        </div> <!-- end .panel-header div -->
        <div class="panel-body">
            <table ng-table="property.tableParams"
                   class="table table-striped table-responsive table-condensed editable-table"
                   show-filter="false"
                   demo-tracked-table="property.tableTracker"
                   ng-form="property.tableForm">
                <colgroup>
                    <col width="45%"/>
                    <col width="45%"/>
                    <col width="10%"/>
                </colgroup>

                <tr ng-repeat="row in $data" ng-form="rowForm" demo-tracked-table-row="row">
                    <td th:title="#{services.form.header.properties.name}"
                        ng-switch="row.isEditing"
                        ng-class="name.$dirty ? 'bg-warning' : ''"
                        ng-form="name">
                        <span ng-switch-default="ng-switch-default" class="editable-text">{{row.name}}</span>
                        <div class="controls"
                             ng-class="name.$invalid &amp;&amp; name.$dirty ? 'has-error' : ''"
                             ng-switch-when="true">
                            <input class="form-control noresize editable-text"
                                   ng-model="property.tmpRowData.name"/>
                        </div>
                    </td>
                    <td th:title="#{services.form.header.properties.value}"
                        ng-switch="row.isEditing"
                        ng-class="propValue.$dirty ? 'bg-warning' : ''"
                        ng-form="propValue">
                        <span ng-switch-default="ng-switch-default" class="editable-text">{{row.propValue}}</span>
                        <div class="controls"
                             ng-class="propValue.$invalid &amp;&amp; propValue.$dirty ? 'has-error' : ''"
                             ng-switch-when="true">
                            <input class="form-control noresize editable-text"
                                   ng-model="property.tmpRowData.propValue"/>
                        </div>
                    </td>
                    <td>
                        <!-- Save button -->
                        <button class="btn btn-primary btn-sm"
                                ng-click="property.save(row, property.tmpRowData, rowForm)"
                                ng-if="row.isEditing" ng-disabled="rowForm.$pristine || rowForm.$invalid"><span
                                class="glyphicon glyphicon-ok"></span></button>

                        <!--Cancel Button-->
                        <button class="btn btn-default btn-sm"
                                ng-click="property.cancel(row, rowForm)"
                                ng-if="row.isEditing"><span class="glyphicon glyphicon-remove"></span></button>

                        <!--Edit button-->
                        <button class="btn btn-default btn-sm" ng-click="property.editRow( row )"
                                ng-if="!row.isEditing">
                            <span class="glyphicon glyphicon-pencil"></span>
                        </button>

                        <!--Delete button-->
                        <button class="btn btn-danger btn-sm" ng-click="property.del(row)" ng-if="!row.isEditing"><span
                                class="glyphicon glyphicon-trash"></span></button>
                    </td>
                </tr>
                <tr ng-show="row.isAdding">
                    <td><input name="addPropertyName" class="form-control noresize editable-text" rows="2"
                               placeholder="New property name"
                               ng-model="row.name" required="required"/></td>
                    <td><input name="addPropertyValue" class="form-control noresize editable-text" rows="2"
                               placeholder="New property value"
                               ng-model="row.propValue" required="required"/></td>
                    <td>
                        <!-- Add Row toggle -->
                        <button class="btn btn-success btn-sm"
                                ng-click="property.addRow(row, rowForm)"
                                ng-if="row.isAdding">
                        <span class="glyphicon glyphicon-plus"></span>
                        </button>
                        <!-- cancel add row -->
                        <button class="btn btn-default btn-sm"
                                ng-click="property.cancelAdd( row, rowForm )">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>
                    </td>
                </tr>
                <tr class="addRow" ng-show="!row.isAdding">
                    <td>
                        <button class="btn btn-default btn-sm" ng-click="row.isAdding = true">
                            <span class="glyphicon glyphicon-plus text-success"></span>
                        </button>
                    </td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
</div>
